<template>
	<div id="personalInformation">
		<div class="wrapBox">
			<div class="title">基本信息</div>
			<div class="main flex-row">
				<div class="left flex-row">
					<!-- <img class="headImg" src="../../assets/images/logo.png" alt="" /> -->
					<div class="info">
						<div class="name">姓名：{{dataList.sysUser.nickName}}</div>
						<div class="text">微信昵称:{{dataList.sysUser.nickName}}</div>
						<div class="text">角色:{{dataList.sysUser.roleName}}</div>
						<div class="text">手机号：{{dataList.sysUser.phonenumber}}</div>
						<div class="text" v-if="dataList.level == 'PAID_MEMBER'">会员等级：{{dataList.vipExpiryTime}}</div>
					</div>
				</div>
				<div class="right">
					<div class="item">
						<div class="val">{{dataList.sysUser.points}}</div>
						<div class="label">善爱积分余额</div>
					</div>
					<div class="item">
						<div class="val">{{dataList.sysUser.subsidyRemainAmount}}</div>
						<div class="label">消费补贴额度</div>
					</div>
					<div class="item">
						<div class="val">{{dataList.sysUser.investmentAmount}}</div>
						<div class="label">实际投资金额</div>
					</div>
					<div class="item">
						<div class="val">{{dataList.sysUser.givenGiftInvestmentAmount}}</div>
						<div class="label">赠送投资金额</div>
					</div>
				</div>
			</div>
		</div>
		<div class="wrapBox" style="margin-top: 15px">
			<div class="title">个人数据(善爱商城)</div>
			<div class="main flex-row">
				<div class="dataItem">
					<div class="name">消费金额(元)</div>
					<div class="num">{{dataList.shoppingMallConsumeData.consumeAmount}}</div>
				</div>
				<div class="dataItem">
					<div class="name">消费善爱积分</div>
					<div class="num">{{dataList.shoppingMallConsumeData.consumePoints}}</div>
				</div>
				<div class="dataItem">
					<div class="name">订单数(单)</div>
					<div class="num">{{dataList.shoppingMallConsumeData.orderCount}}</div>
				</div>
				<div class="dataItem">
					<div class="name">购买商品数(个)</div>
					<div class="num">{{dataList.shoppingMallConsumeData.goodsCount}}</div>
				</div>
				<div class="dataItem">
					<div class="name">退款数</div>
					<div class="num">{{dataList.shoppingMallConsumeData.refundCount}}</div>
				</div>
			</div>
		</div>
		<div class="wrapBox" style="margin-top: 15px">
			<div class="title">分销数据</div>
			<div class="main flex-row">
				<div class="dataItem">
					<div class="name">分享注册用户数(个)</div>
					<div class="num">{{dataList.sharedSignUpCount}}</div>
				</div>
				<div class="dataItem">
					<div class="name">一级分销下级(个)</div>
					<div class="num">{{dataList.firstCount}}</div>
				</div>
				<div class="dataItem">
					<div class="name">二级分销下级(个)</div>
					<div class="num">{{dataList.secondCount}}</div>
				</div>

			</div>
		</div>
		<div class="wrapBox" style="margin-top: 15px">
			<el-table :data="orderList" :loading="loading" border style="width: 100%">
				<el-table-column label="订单编号" prop="code" width='140'></el-table-column>
				<el-table-column label="用户名称" prop="memberName" width='140' show-overflow-tooltip></el-table-column>
				<el-table-column label="用户手机号" prop="memberMobile" width='140'></el-table-column>
				<el-table-column label="商品名称" prop="goodsName" width='140' show-overflow-tooltip></el-table-column>
				<el-table-column label="订单积分" prop="pvAll"></el-table-column>
				<el-table-column label="订单金额(元)" prop="amtAll"></el-table-column>
				<el-table-column label="创建时间" prop="createdTime" width='160'></el-table-column>
				<el-table-column label="支付时间" prop="payTime" width='160'></el-table-column>
				<el-table-column label="核销时间" prop="writeOffTime" width='160'></el-table-column>
				<el-table-column label="状态" prop="statusName" width='100'></el-table-column>
			</el-table>
		</div>
	</div>
</template>
<script>
import qs from 'qs';

import { getLoginUserInfo } from '@/api/system/user';
export default {
	data() {
		return {
			dataList: {
				sysUser: {},
				shoppingMallConsumeData: {},
			},
			labelWidth: '100px',
			options: [
				{
					value: '选项1',
					label: '黄金糕',
				},
				{
					value: '选项2',
					label: '双皮奶',
				},
				{
					value: '选项3',
					label: '蚵仔煎',
				},
				{
					value: '选项4',
					label: '龙须面',
				},
				{
					value: '选项5',
					label: '北京烤鸭',
				},
			],
			orderList: [],
			loading: false,
		};
	},
	mounted() {
		this.getData();
	},
	methods: {
		query_order: function (memberName) {
			this.loading = true;
			const params = {
				page: 0,
				pagesize: 999,
				startPayTime: new Date(
					new Date().getTime() - 31536000000
				).Format('yyyy-MM-dd hh:mm:ss'),
				endPayTime: new Date().Format('yyyy-MM-dd hh:mm:ss'),
				memberName: memberName,
			};

			this.$myApi.query_order(params).then((response) => {
				this.orderList = response.result.content;
				setTimeout(() => {
					this.loading = false;
				}, 300);
			});
		},
		/**
		 * 获取列表
		 */
		getData: function () {
			this.loading = true;
			const params = {
				userId: this.$route.params.userId,
			};
			getLoginUserInfo(params).then((response) => {
				if (response.code == 200) {
					response.data.sysUser.roleName =
						response.data.sysUser.roles[0].roleName;
					this.dataList = response.data;
				}
			});
		},
	},
};
</script>

<style scoped lang="scss" >
#personalInformation {
	background-color: #f8f8f8 !important;
	color: #000;
	.wrapBox {
		background-color: #fff;
		padding: 20px 25px;
		.title {
			font-size: 16px;
			font-weight: 700;
			line-height: 20px;
			display: flex;
			align-items: center;
		}
		.main {
			padding-top: 20px;
			box-sizing: border-box;
			.dataItem {
				-webkit-box-flex: 1;
				-ms-flex: 1;
				flex: 1;
				margin-left: 20px;
				padding: 20px 20px 20px 35px;
				-webkit-box-sizing: border-box;
				box-sizing: border-box;
				border-radius: 4px;
				background-color: #f2f8ff;
				.name {
					font-size: 14px;
					color: #969696;
				}
				.num {
					margin-top: 10px;
					font-size: 24px;
					font-weight: 600;
				}
			}
			.left {
				padding-right: 50px;
				min-width: 50%;
				.headImg {
					box-sizing: border-box;
					width: 60px;
					height: 60px;
					background: #f2f2f2;
					border: 1px solid #dcdfe6;
					border-radius: 50%;
				}
				.info {
					padding-left: 25px;

					.name {
						font-size: 16px;
						font-weight: 700;
						margin-bottom: 20px;
					}
					.text {
						font-size: 14px;
						color: #2a2a2a;
						line-height: 1.8;
					}
				}
			}
			.right {
				display: flex;
				width: 60%;
				position: relative;
				.item {
					padding-left: 50px;
					-webkit-box-flex: 1;
					-ms-flex: 1;
					flex: 1;
					.val {
						font-size: 20px;
						font-weight: 600;
					}
					.label {
						margin-top: 15px;
						font-size: 14px;
						color: #787878;
					}
				}
				&::after {
					content: '';
					position: absolute;
					left: 0;
					top: 15px;
					bottom: 15px;
					width: 1px;
					background: #dcdfe6;
				}
			}
		}
	}
}
</style>>
